<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面布局</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/luckyDraw.css">

    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            background-color: rgba(15, 12, 39, 0.5) !important;
            z-index: -1;
        }
        
        #app {
            width: 10rem;
            height: 10rem;
            z-index: 999999999999999;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="lottery">
            <div class="lotteryBox" id="lotteryBox">
                <ul class="trChooseImg"></ul>
                <script id="showChooseImgs" type="text/html">
                    <div class="lotteryBox" id="lotteryBox">
                        <ul>
                            {{if data.length>0}} {{each data as itemsOne index}}
                            <li class="lottery-unit-{{itemsOne.index}}" data-value="0">
                                <img src="{{itemsOne.img}}">
                                <span class="allshuliang">{{itemsOne.addMoney <= 1?'':'x'+itemsOne.addMoney}}</span>
                                <div class="shade"></div>
                            </li>
                            {{/each}} {{/if}}

                            <li class="flex-dire-row" style="align-items: center;width:5.32407379rem;justify-content: space-around;">
                                <div class="lotteryBtn pr flex-dire-column inputButton" data-idx="1">
                                    <input type="button" class="inputButton1" value="抽一次">
                                    <div class="flex-dire-row" style="align-items:center;justify-content:space-around;margin-top:.042593rem;">
                                        <img src="./image/ic_money.png" style="width:.305556rem;height:.305556rem;" alt="">
                                        <div class="inputOneCiX1">x1</div>
                                    </div>
                                </div>
                                <div class="lotteryBtn pr flex-dire-column inputButton" data-idx="2">
                                    <input type="button" class="inputButton2" value="抽十次">
                                    <div class="flex-dire-row" style="align-items:center;justify-content:space-around;margin-top:.042593rem;">
                                        <img src="./image/ic_money.png" style="width:.305556rem;height:.305556rem;" alt="">
                                        <div class="inputTenCiX10">x10</div>
                                    </div>
                                </div>
                            </li>

                            {{if data2.length>0}} {{each data2 as itemsOnes index}}
                            <li class="lottery-unit-{{itemsOnes.index}}" data-value="3">
                                <img src="{{itemsOnes.img}}">
                                <span class="allshuliang">{{itemsOnes.addMoney <= 1?'':'x'+itemsOnes.addMoney}}</span>
                                <div class="shade"></div>
                            </li>
                            {{/each}} {{/if}}

                    </div>

                    <!-- {{if data.length>0}} {{each data as itemsOne index}}
                <td class="lottery-unit lottery-unit-{{itemsOne.index}}"><img src="{{itemsOne.img}}">
                    <span class="allshuliang">{{itemsOne.addMoney <= 1?'':'x'+itemsOne.addMoney}}</span>
                    <div class="mask"></div>
                </td>
                {{/each}} {{/if}}
                <td class="flex-dire-row" style="align-items: center;width:5.32407379rem;justify-content: space-around;">
                    <div class="flex-dire-column inputButton" data-idx="1">
                        <input type="button" class="inputButton1" value="抽一次">
                        <div class="flex-dire-row" style="align-items:center;justify-content:space-around;margin-top:.042593rem;">
                            <img src="./image/ic_money.png" style="width:.305556rem;height:.305556rem;" alt="">
                            <div class="inputOneCiX1">x1</div>
                        </div>
                    </div>
                    <div class="flex-dire-column inputButton" data-idx="2">
                        <input type="button" class="inputButton2" value="抽十次">
                        <div class="flex-dire-row" style="align-items:center;justify-content:space-around;margin-top:.042593rem;">
                            <img src="./image/ic_money.png" style="width:.305556rem;height:.305556rem;" alt="">
                            <div class="inputTenCiX10">x10</div>
                        </div>
                    </div>
                </td>
                {{if data2.length>0}} {{each data2 as itemsOnes index}}
                <td class="lottery-unit lottery-unit-{{itemsOnes.index}}"><img src="{{itemsOnes.img}}">
                    <span class="allshuliang">{{itemsOnes.addMoney <= 1?'':'x'+itemsOnes.addMoney}}</span>
                    <div class="mask"></div>
                </td>
                {{/each}} {{/if}} -->
                </script>
            </div>
        </div>
    </div>
    <script src="./js/flexible.min.js"></script>
    <script src="./js/zepto.js"></script>
    <script src="./js/template.js"></script>
    <script src="./js/fastClick.js"></script>
    <script src="./js/luckdraw.js"></script>
</body>

</html>